<template>
    <el-container>
        <el-header style="background-color: #F3F3F3">
            <div>
                商品日志
                <div id="sx">
                    <el-button size="small" icon="el-icon-refresh" @click="shuaxin()">刷新</el-button>
                </div>
                <div id="fh">
                    <el-button size="small" icon="el-icon-arrow-left" @click="fanhui">返回</el-button>
                </div>
            </div>
        </el-header>
        <el-main>
            <!-- 商品表格 -->
            <el-table
                    :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
                    border
                    stripe
                    :header-cell-style="{
        					background: '#F5F7FA',
        					color: 'black',
      					}">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column prop="id" label="ID" ></el-table-column>
                <el-table-column prop="userID" label="用户ID" ></el-table-column>
                <el-table-column prop="user[0].trueName" label="用户名称" ></el-table-column>
                <el-table-column prop="productID" label="商品ID"></el-table-column>
                <el-table-column prop="product[0].productName" label="商品名称"></el-table-column>
                <el-table-column prop="type" label="操作类型">
                    <template slot-scope="scope">
                        <span v-if="scope.row.type == 1">添加操作</span>
                        <span v-if="scope.row.type == 2">删除操作</span>
                        <span v-if="scope.row.type == 3">修改操作</span>
                    </template>
                </el-table-column>
                <el-table-column prop="operationTime" label="操作时间"></el-table-column>
                <el-table-column fixed="right" label="操作" width="100">
                    <template slot-scope="scope">
                        <el-button  @click="del(scope.row.id)" type="text" size="small">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页器 -->
            <div class="block" style="margin-top:15px;">
                <el-pagination align='center' @size-change="handleSizeChange" @current-change="handleCurrentChange"
                               :current-page="currentPage"
                               :page-sizes="[2,4,8,10]"
                               :page-size="pageSize"
                               layout="total, sizes, prev, pager, next, jumper"
                               :total="tableData.length">
                </el-pagination>
            </div>
        </el-main>
    </el-container>
</template>

<script>
    export default {
        name: "ProductLog",
        data(){
          return{
              tableData:[], //商品表数据
              currentPage: 1, // 当前页码
              total: 20, // 总条数
              pageSize: 10 ,// 每页的数据条数
          }
        },
        methods:{
            //刷新
            shuaxin(){
                this.$router.go(0);
            },
            //返回
            fanhui(){
                if(window.history.length <= 1){
                    this.$router.push({path:"/system/storageManagement"});
                    return false;
                }else {
                    this.$router.go(-1);
                }
            },
            getProductLog(){
                this.$http.post('/ProductLog/getProductLog')
                    .then(res => {
                        this.tableData = res.data;
                        console.log(res.data)
                    })
            },
            //每页条数改变时触发 选择一页显示多少行
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.currentPage = 1;
                this.pageSize = val;
            },
            //当前页改变时触发 跳转其他页
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.currentPage = val;
            },
            //删除商品日志
            del(id){
                console.log(id);
                this.$confirm("此操作将永久删除此商品, 是否继续?", "警告", {
                    confirmButtonText: "继续",
                    cancelButtonText: "取消",
                    type: "warning"
                })
                .then(() => {
                    const data = {id};
                    console.log(data);
                    this.$http.post("/ProductLog/delProductLog?id=" + id, data)
                        .then(response => {
                            console.log(response);
                            this.getProductLog(); //删除数据后重新获取数据
                        })
                        .catch(() => {
                            this.$message({
                                type: "success",
                                message: "删除成功"
                            })
                        })
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除"
                    });
                });
            },
        },
        mounted() {
            this.getProductLog();
        },
    }
</script>

<style scoped>
    .el-container{
        width: 1340px;
    }
    #sx{
        float: right;
        margin-right: 110px;
    }
    #fh{
        float: right;
        margin-right: -180px;
    }
</style>